import { defineComponent } from 'vue';
import { getProject, getProjectList } from '@/api/home';
import SheltV2 from '../../common/SheltV2';
import Echarts from '@/components/Echarts';
import './index.less';
import SearchRow from '../SearchRow';
import { dateFormatter } from '@/utils';
import ItmeDetail from './detail';
import Detail from '../Detail';

export default defineComponent({
  name: 'MyItem',
  setup() {
    const detailRef = ref();
    const itemDetailRef = ref();
    const echartsRef = ref();
    const detailTitle = ref('');
    const _title = [
      '所有项目',
      '延期项目',
      '正常项目',
      '延期预警',
      '规范按时完成',
      '超时完成',
      '进行中项目',
      '已完成项目'
    ];
    const data = reactive({
      search: {
        month: undefined,
        is_company: 0
      },
      list: [
        {
          key: 'month',
          type: 'popup',
          title: '日期选择',
          icon: 'calendar',
          placeholder: '请选择'
        }
      ]
    }) as AnyObject;
    const filterDetail = reactive({}) as AnyObject;
    Object.assign(filterDetail, data);
    filterDetail.list = [
      ...data.list,
      {
        key: 'type',
        type: 'list',
        title: '项目状态',
        placeholder: '项目状态',
        list: _title.map((item, index) => ({ label: item, value: index }))
      }
    ];

    const colors = new Map([
      ['完成超期', '#d43030'],
      ['延期进行', '#d43030'],
      ['按时完成', '#00b87a'],
      ['正常进行', '#2a82e4']
    ]);
    const tableDetail = [
      { title: '项目名称', key: 'name' },
      { title: '计划时间', key: 'create_time' },
      {
        title: '是否超期',
        key: 'over_time',
        render: function (key: string) {
          return <span style={{ color: colors.get(key) }}>{key}</span>;
        }
      }
    ];

    const datas = ref({}) as AnyObject;
    const detailSlots = ref({
      detail: () => <SearchRow onSearch={handleSelect} data={data} />
    });
    const option = ref({
      tooltip: {
        trigger: 'item'
      },
      color: ['#4a74ea', '#eb7b3b', '#3bc27f', '#ffc824'],
      title: [
        {
          subtext: '进行中项目',
          top: '28%',
          left: '23%',
          itemGap: 5,
          textAlign: 'center',
          triggerEvent: true
        },
        {
          subtext: '已完成项目',
          top: '72%',
          left: '23%',
          itemGap: 5,
          textAlign: 'center',
          triggerEvent: true
        }
      ],
      legend: {
        icon: 'circle',
        itemGap: 20,
        left: 0,
        itemWidth: 8
      },
      label: {
        formatter: '{name|{c}}({d}%)\n{b}',
        textAlign: 'left',
        rich: {
          name: {
            fontSize: 16,
            fontWeight: 'bold',
            padding: [5, 0]
          }
        }
      },
      media: [
        {
          option: {
            series: [
              {
                label: { show: false },
                type: 'pie',
                name: '进行中项目',
                center: ['25%', '32%'],
                radius: ['30%', '45%']
              },
              {
                label: { show: false },
                type: 'pie',
                name: '已完成项目',
                center: ['25%', '77%'],
                radius: ['30%', '45%']
              }
            ]
          }
        }
      ]
    }) as AnyObject;
    const handleSelect = (val: string) => {
      const real_month = dateFormatter(data.search.month);
      handleItem({ month: real_month });
    };
    const viewDetail = (type?: number) => {
      detailTitle.value = type ? '个人项目-' + _title[type] : '个人项目';
      detailRef.value.show = true;
    };
    const viewLiDetail = (item: AnyObject) => {
      itemDetailRef.value.viewLiDetail(item);
    };
    handleItem();
    function handleItem(params = {}) {
      getProject(params).then((res) => {
        datas.value = res.data;
        option.value.media[0].option.series[0].data = [
          { name: '正常项目', value: res.data.normal },
          { name: '延期项目', value: res.data.delay }
        ];
        option.value.title[0].text = res.data.ongoing;
        option.value.media[0].option.series[1].data = [
          { name: '规范按时完成', value: res.data.on_time },
          { name: '超时完成', value: res.data.timeout }
        ];
        option.value.title[1].text = res.data.finish;

        echartsRef.value?.chartInstance.on('click', (e: AnyObject) => {
          console.log(e, e.componentType);
          if (e.componentType === 'title') {
            const _type = [6, 7];
            viewDetail(_type[e.componentIndex]);
          }
        });
      });
    }
    return () => (
      <>
        <SheltV2
          title="我的项目"
          more="查看详情"
          onViewDetail={viewDetail}
          v-slots={detailSlots.value}
          question="<div><p>【该数据每日02:00更新一次】</p><p>我的项目数据来源于BI，展示与本人有关的项目数据。</p></div>"
        >
          <Echarts ref={echartsRef} aspectRatio="4/5" option={option.value} />
          <div class="item_wrap normal">
            <div class="item hover-color" onClick={() => viewDetail(2)}>
              <div class="title">正常项目</div>
              <div class="num">{datas.value.normal}</div>
            </div>
            <div class="item">
              <div class="title">正常项目占比</div>
              <div class="num">{datas.value.normal_rate}</div>
            </div>
            <div class="item hover-color" onClick={() => viewDetail(1)}>
              <div class="title">延期项目</div>
              <div class="num red">{datas.value.delay}</div>
            </div>
            <div class="item hover-color" onClick={() => viewDetail(3)}>
              <div class="title">延期预警</div>
              <div class="num red">{datas.value.warning}</div>
            </div>
          </div>
          <div class="item_wrap finish">
            <div class="item hover-color" onClick={() => viewDetail(4)}>
              <div class="title">规范按时完成</div>
              <div class="num">{datas.value.on_time}</div>
            </div>
            <div class="item">
              <div class="title">规范按时率</div>
              <div class="num">{datas.value.on_time_rate}</div>
            </div>
            <div class="item hover-color" onClick={() => viewDetail(5)}>
              <div class="title">超时完成</div>
              <div class="num">{datas.value.timeout}</div>
            </div>
          </div>
        </SheltV2>
        <Detail
          title={detailTitle.value}
          ref={detailRef}
          filterDetail={filterDetail}
          tableDetail={tableDetail}
          requestApi={getProjectList}
          onViewLiDetail={viewLiDetail}
        />
        <ItmeDetail ref={itemDetailRef} />
      </>
    );
  }
});
